<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebGL Viewport</title>

    <style type="text/css">
      body { background-color: grey;}
      canvas { background-color: white;}
    </style>
    <script src="../../dist/skulpt.js" type="text/javascript"></script>
    <script src="../../dist/builtin.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>WebGL Viewport</h1>

    <form>
      <textarea id="code" name="code" rows="40" cols="120">
import webgl

gl = webgl.Context("my-canvas")
gl.viewport(0, 150, 200, 150)
vs = gl.createShader(gl.VERTEX_SHADER) 
gl.shaderSource(vs, "attribute vec3 aVertexPosition; void main(void) { gl_Position = vec4(aVertexPosition, 1.0); }")
gl.compileShader(vs)
print "Vertex shader COMPILE_STATUS: " + str(gl.getShaderParameter(vs, gl.COMPILE_STATUS))
fs = gl.createShader(gl.FRAGMENT_SHADER) 
gl.shaderSource(fs, "void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }")
gl.compileShader(fs)
print "Fragment shader COMPILE_STATUS: " + str(gl.getShaderParameter(fs, gl.COMPILE_STATUS))

program = gl.createProgram()
gl.attachShader(program, vs)
gl.attachShader(program, fs)
gl.linkProgram(program)
print "Program LINK_STATUS: " + str(gl.getProgramParameter(program, gl.LINK_STATUS))
gl.useProgram(program)

triangleVertices = [-0.5,  0.5, 0.0,
                     0.0,  0.0, 0.0,
                    -0.5, -0.5, 0.0,
                     0.5,  0.5, 0.0,
                     0.0,  0.0, 0.0,
                     0.5, -0.5, 0.0]

trianglesVerticeBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer)
gl.bufferData(gl.ARRAY_BUFFER, webgl.Float32Array(triangleVertices), gl.STATIC_DRAW)

vertexPositionAttribute = gl.getAttribLocation(program, "aVertexPosition")
gl.enableVertexAttribArray(vertexPositionAttribute)
gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer)
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, False, 0, 0)
gl.drawArrays(gl.TRIANGLES, 0, 6)
      </textarea>
      <button type="button" onclick="runit()">Run</button>
    </form>
    <canvas id="my-canvas" height="300" width="400">
      Your browser does not support the HTML5 canvas element.
    </canvas>
    <pre id="my-output" ></pre>
    <script>
      function outputHandler(text) {
        var output = document.getElementById("my-output");
        output.innerHTML = output.innerHTML + text.replace(/</g, '&lt;');
      }


      function runit() {
        var prog = document.getElementById("code").value;
        // Clear the output
        document.getElementById("my-output").innerHTML = '';
        Sk.canvas = "my-canvas";
        Sk.pre = "my-output";
        Sk.configure({"output":outputHandler, });
        try {
           eval(Sk.importMainWithBody("<stdin>", false, prog));
        }
        catch(e) {
          alert(e);
        }
      }
    </script>
  </body>
</html>
